<template>
  <div class="task-scheduling_header">
    <CustomTitle title="任务排期"></CustomTitle>
    <a-space>
      <a-checkbox v-model="isOut" :value="true" @change="init" />
      <span>只展示外出任务</span>
    </a-space>
  </div>
  <a-date-picker v-model:model-value="date" hide-trigger style="margin: 12px 0" :show-now-btn="false" @change="init" />

  <div class="task-scheduling_state">
    <div class="approve-state">
      <div :class="{ 'approve-state_active': commTaskStatus === 1 }" @click="handelCommTaskStatus(1)">
        未开始：{{ commTaskNumber.notStartNumber || 0 }}
      </div>
      <div :class="{ 'approve-state_active': commTaskStatus === 2 }" @click="handelCommTaskStatus(2)">
        执行中：{{ commTaskNumber.ingNumber || 0 }}
      </div>
      <div :class="{ 'approve-state_active': commTaskStatus === 3 }" @click="handelCommTaskStatus(3)">
        结束：{{ commTaskNumber.completedNumber || 0 }}
      </div>
    </div>
  </div>
  <div class="task-scheduling_list">
    <template v-if="taskData.length">
      <div
        class="task-scheduling_list__item"
        :class="taskStatusClass(item.status)"
        v-for="item in taskData"
        :key="item.commTaskId"
      >
        <div>
          <span>{{ item.taskTitle }}</span>
          <span class="taskStatus-color">{{ taskStatus[item.status] }}</span>
        </div>
        <div>
          <span>客户</span>
          <span>{{ item.customerName }}</span>
        </div>
        <div>
          <span>地址</span>
          <span>{{ item.address }}</span>
        </div>
        <div class="left-border"></div>
      </div>
    </template>
    <a-empty v-else description="这里暂时什么都没有哦~">
      <template #image>
        <img :src="homeAuditIcon" alt="" />
      </template>
    </a-empty>
  </div>
</template>

<script setup lang="ts">
import { getTodoListByCalendar } from "@/apis/home";
import dayjs from "dayjs";
import { computed } from "vue";
import _ from "lodash";
import { auditType } from "@/views/home/config";
import homeAuditIcon from "@/assets/images/home-audit-icon.png";

/**
 * 默认今天
 */
const date = ref(dayjs().format("YYYY-MM-DD"));
const isOut = ref(false);
const taskData = ref([]);
const commTaskStatus = ref(2);
const commTaskNumber = ref({
  notStartNumber: 0,
  ingNumber: 0,
  completedNumber: 0
});
const init = async () => {
  const { data } = await getTodoListByCalendar(date.value + " 00:00:00", isOut.value, commTaskStatus.value);
  commTaskNumber.value = data?.commTaskNumber || {
    notStartNumber: 0,
    ingNumber: 0,
    completedNumber: 0
  };
  taskData.value = data?.taskList || [];
};
const taskStatus: any = {
  2: "执行中",
  3: "结束",
  1: "未开始"
};
const taskStatusMap = new Map([
  [1, "status-no-start"],
  [2, "status-pending"],
  [3, "status-finish"]
]);
const taskStatusClass = computed(() => {
  return (taskStatus: any) => {
    return taskStatusMap.get(taskStatus) || "";
  };
});

const handelCommTaskStatus = (taskStatus: number) => {
  commTaskStatus.value = taskStatus;
  init();
};

// const handelCommTaskStatus = _.debounce(function (taskStatus:number){
//   commTaskStatus.value = taskStatus
//   init();
// },500)

onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.task-scheduling_header {
  @include flex-between;

  ::v-deep(.arco-checkbox-icon) {
    border-radius: 50%;
  }
}

::v-deep(.arco-picker-header) {
  border: none;
}

::v-deep(.arco-picker-header-title) {
  font-size: 16px;
  font-weight: bold;
}

::v-deep(.arco-picker-cell-today) {
  &::after {
    display: none;
  }

  .arco-picker-date-value {
    background: #ebeef5;
  }
}

::v-deep(.arco-picker-cell-selected) {
  .arco-picker-date-value {
    background: rgb(var(--primary-6));
  }
}

.task-scheduling_state {
  .approve-state {
    @include flex-between;
    div {
      @include flex-inline-flex;
      width: 25%;
      height: 28px;
      background-color: #f5f7fa;
      border-radius: 32px;
      cursor: pointer;
    }

    .approve-state_active {
      background: #007dff;
      color: #fff;
    }
  }
}
.task-scheduling_list {
  position: relative;
  flex: 1;
  overflow-y: auto;
  margin-top: 8px;

  &__item {
    position: relative;
    padding: 19px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid rgba(20, 200, 92, 0.102);

    div {
      @include flex-between;
      flex-wrap: wrap;
    }

    div + div {
      margin-top: 8px;
    }

    .left-border {
      position: absolute;
      left: -2px;
      top: -9px;
      width: 4px;
      height: 100%;
      border-radius: 4px 0 0 4px;
    }

    & + .task-scheduling_list__item {
      margin-top: 10px;
    }
  }

  .status {
    &-pending {
      background-color: #f0f9eb;
      .taskStatus-color {
        color: #14c85c;
      }
      .left-border {
        background-color: #14c85c;
      }
    }
    &-no-start {
      background-color: rgba(155, 202, 255, 0.1);
      .taskStatus-color {
        color: #409eff;
      }
      .left-border {
        background-color: #409eff;
      }
    }
    &-finish {
      background-color: #f8f9fc;
      .taskStatus-color {
        color: #dcdfe6;
      }
      .left-border {
        background-color: #dcdfe6;
      }
    }
  }
}
:deep(.arco-empty) {
  @include position-center;
}
</style>
